<template>
  <el-select size="small" v-model="curLevel" @change="changeLevel" v-loading="loading">
    <el-option :key="level.admin" :value="level.admin" :label="levelCN[level.admin]" />
    <el-option :key="level.member" :value="level.member" :label="levelCN[level.member]" />
  </el-select>
</template>

<script>
export default {
  name: 'member-level-select',
  props: {
    member: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      level: this.$C.groups.level,
      levelCN: this.$C.groups.levelCN,
      curLevel: this.member.level,
      loading: false,
    };
  },
  methods: {
    changeLevel(level) {
      this.loading = true;
      this.$api.groupMembers.setLevel({
        groupId: this.$route.params.groupId,
        memberId: this.member.id,
        level,
      }).then(() => this.$message.success('设置成功'))
        .catch(() => { this.curLevel = this.member.level; }) // 升级失败要将显示改回来
        .then(() => { this.loading = false; });
    },
  },
};
</script>

<style></style>
